import {
  Badge,
  Button,
  Card,
  Statistic,
  Descriptions,
  Divider,
  Dropdown,
  Menu,
  Popover,
  Steps,
  Table,
  Tooltip,
  Empty,
  Modal,
  Drawer,
} from 'antd';
import { GridContent, PageContainer, RouteContext } from '@ant-design/pro-layout';
import {
  DingdingOutlined,
  DownOutlined,
  EllipsisOutlined,
  InfoCircleOutlined,
} from '@ant-design/icons';
import classNames from 'classnames';
import styles from './style.less';
import React, { useState, Fragment, useEffect } from 'react';
import { getTakeAwayUserOrderById } from '@/services/takeAwayUserOrderService';
import { OrderStatus } from '@/constants/commonConst';
import { dateFormat } from '@/utils/common';
import IconFontCN from '@/components/IconFontCN';
import IconFont from '@/pages/editor/flow/common/IconFont';

interface Props {
  modalVisible: boolean;
  onClose: () => void;
  id: number;
}

const { Step } = Steps;

type AdvancedState = {
  operationKey: string;
  tabActiveKey: string;
};

const DetailPage: React.FC<Props> = (props) => {
  const { modalVisible, onClose, id } = props;
  const [orderDetail, setOrderDetail] = useState<TakeAwayUserOrderType.TakeAwayUserOrder>();
  const [tabStatus, seTabStatus] = useState<AdvancedState>({
    operationKey: 'tab1',
    tabActiveKey: 'detail',
  });

  const onTabChange = (tabActiveKey: string) => {
    seTabStatus({ ...tabStatus, tabActiveKey });
  };

  const getOrderStatus = () => {
    if (orderDetail?.IsTakeAway === 1) {
      if (orderDetail.Status === 1) {
        return "待制作";
      }

      if (orderDetail.Status === 2) {
        return "待取餐";
      }
    }

    return OrderStatus.find(r => r.value === orderDetail?.Status)?.label;
  }

  const extra = (
    <div className={styles.moreInfo}>
      <Statistic title="状态" value={getOrderStatus()} />
      <Statistic title="订单金额" value={orderDetail?.Price} prefix="¥" />
    </div>
  );

  const description = (
    <RouteContext.Consumer>
      {({ isMobile }) => (
        <Descriptions className={styles.headerList} size="small" column={isMobile ? 1 : 2}>
          {orderDetail?.IsTakeAway === 1 ? <Descriptions.Item label="取餐号" >{orderDetail?.TakeAwayNumber}</Descriptions.Item> : null}
          {orderDetail?.IsTakeAway === 2 ? <Descriptions.Item label="下单人" >{orderDetail?.OrderUserName}</Descriptions.Item> : null}
          <Descriptions.Item label="下单时间">{orderDetail?.AddTime}</Descriptions.Item>
          <Descriptions.Item label="支付方式">{orderDetail?.PayType === 1 ? "余额支付" : "微信支付"}</Descriptions.Item>
          {orderDetail?.IsTakeAway === 2 ? <Descriptions.Item label="下单地址">{orderDetail?.UserAddress}</Descriptions.Item> : null}
          {orderDetail?.IsTakeAway === 2 ? <Descriptions.Item label="配送费">¥{orderDetail?.DeliveryPrice}</Descriptions.Item> : null}
          <Descriptions.Item label="就餐人数">{orderDetail?.PeopleCount}</Descriptions.Item>
        </Descriptions>
      )}
    </RouteContext.Consumer>
  );

  const popoverContent = (
    <div style={{ width: 160 }}>
      吴加号
      <span className={styles.textSecondary} style={{ float: 'right' }}>
        <Badge status="default" text={<span style={{ color: 'rgba(0, 0, 0, 0.45)' }}>未响应</span>} />
      </span>
      <div className={styles.textSecondary} style={{ marginTop: 4 }}>
        耗时：2小时25分钟
      </div>
    </div>
  );

  const desc1 = (
    <div className={classNames(styles.textSecondary, styles.stepDescription)}>
      <Fragment>
        <DingdingOutlined style={{ color: (orderDetail?.Status ?? 0) >= 0 ? '#00A0E9' : '', marginLeft: 8 }} />
        {orderDetail?.OrderUserName}
        <div>电话：{orderDetail?.UserPhone}</div>
      </Fragment>
      <div>{dateFormat(orderDetail?.AddTime, "yyyy-mm-dd hh:mm:ss")}</div>
    </div>
  );

  const desc3 = (
    <div className={styles.stepDescription}>
      {
        orderDetail?.IsTakeAway === 2 ?
          <Fragment>
            {
              (orderDetail?.Status ?? 0) < 1 ? <IconFontCN onClick={() => { }} title='' typeString='icon-waimai-copy' style={{}} /> : <IconFontCN onClick={() => { }} title='' typeString='icon-waimai' style={{}} />
            }
          </Fragment> :
          <Fragment>
            {
              (orderDetail?.Status ?? 0) === 2 ? <IconFontCN onClick={() => { }} title='' typeString='icon-shiwu-163-copy' style={{}} /> : <IconFontCN onClick={() => { }} title='' typeString='icon-shiwu-163' style={{}} />
            }
          </Fragment>
      }
    </div>
  );

  const desc2 = (
    <div className={styles.stepDescription}>
      <Fragment>
        {(orderDetail?.Status ?? 0) === 2 ?
          <IconFontCN title='' typeString='icon-daijiedan-copy' onClick={() => { }} style={{ color: (orderDetail?.Status ?? 0) > 0 ? '' : '', marginLeft: 8 }} />
          : <IconFontCN title='' typeString='icon-daijiedan' onClick={() => { }} style={{ color: (orderDetail?.Status ?? 0) > 0 ? '' : '', marginLeft: 8 }} />
        }
      </Fragment>
    </div>
  );

  const desc4 = (
    <div className={styles.stepDescription}>
      <Fragment>
        {(orderDetail?.Status ?? 0) === 3 ?
          <IconFontCN title='' typeString='icon-a-wancheng1' onClick={() => { }} style={{ marginLeft: 8 }} />
          : <IconFontCN title='' typeString='icon-wancheng' onClick={() => { }} style={{ marginLeft: 8 }} />
        }
      </Fragment>
    </div>
  );

  const customDot = (dot: React.ReactNode, { status }: { status: string }) => {
    if (status === 'process') {
      return (
        <Popover placement="topLeft" arrowPointAtCenter content={popoverContent}>
          <span>{dot}</span>
        </Popover>
      );
    }
    return dot;
  };

  const showOrderDetail = () => {
    return orderDetail?.OrderDetails.map((r: TakeAwayUserOrderDetailType.TakeAwayUserOrderDetailResponse) => {
      return <>
        <Descriptions style={{ marginBottom: 16 }} title={r.GoodName}>
          <Descriptions.Item label="数量">{r.Qty}</Descriptions.Item>
          <Descriptions.Item label="价格">{r.Price}</Descriptions.Item>
          <Descriptions.Item label="属性">{r.Properties.join(',')}</Descriptions.Item>
        </Descriptions>
        <Divider style={{ margin: '16px 0' }} />
      </>
    })
  }

  const getOrderDetail = async () => {
    const { Items } = await getTakeAwayUserOrderById(id, { "@relationships": "OrderDetail" });
    setOrderDetail(Items[0]);
  }

  useEffect(() => {
    getOrderDetail();
  }, [id]);

  return (
    <Drawer
      title={`订单详情`}
      width={
        '80%'}
      onClose={onClose}
      open={modalVisible}
      placement='right'
    >
      <PageContainer
        title={"单号：" + orderDetail?.OrderNumber}
        className={styles.pageHeader}
        content={description}
        extraContent={extra}
        tabActiveKey={tabStatus.tabActiveKey}
        onTabChange={onTabChange}
        tabList={[
          {
            key: 'detail',
            tab: '详情',
          },
        ]}
      >
        {orderDetail ?
          <div className={styles.main}>
            <GridContent>
              <Card title="外卖进度" style={{ marginBottom: 24 }}>
                <RouteContext.Consumer>
                  {({ isMobile }) => (
                    <Steps
                      direction={isMobile ? 'vertical' : 'horizontal'}
                      progressDot={customDot}
                      current={orderDetail?.Status}
                    >
                      <Step title="用户下单" description={desc1} />
                      <Step title="商家已接单" description={desc2} />
                      <Step title={orderDetail?.IsTakeAway === 1 ? "待取餐" : "正在配送"} description={desc3} />
                      <Step title="完成" description={desc4} />
                    </Steps>
                  )}
                </RouteContext.Consumer>
              </Card>
              <Card title="商品详情" style={{ marginBottom: 24 }} bordered={false}>
                <Card type="inner" title="商品列表">
                  {showOrderDetail()}
                </Card>
              </Card>
            </GridContent>
          </div>
          : null
        }
      </PageContainer>
    </Drawer>
  );
}

export default DetailPage;
